<template>
  <!-- 用户列表详情 -->
  <div>
    <!-- 内容 -->
    <div>
      <!-- 头部 -->
      <div class="header">
        <ul class="u1">
          <li>
            <van-icon name="arrow-left" @click="$router.go(-1)" />
          </li>
          <li class="l1">
            <van-icon name="wap-home-o" @click="$router.push('/home')" />
          </li>
        </ul>
        <div class="pian" @click="jump2">
          <div class="xaing">
            <dl>
              <dt>
                <img :src="img01" alt="" />
              </dt>
              <dd>
                <p class="p2">名称:{{data1.custName}}</p>
                <p>
                  <span>电话:{{data1.telephone}}</span>
                </p>
              </dd>
            </dl>
          </div>
          <div class="xinxi">
            <span>客户信息</span>
          </div>
        </div>
      </div>
      <!-- tab栏 -->
      <van-tabs
        v-model="active"
        :ellipsis="false"
        color="#ffcc33"
        line-width="60px"
      >
        <van-tab>
          <template #title
            ><van-icon :name="img02" class="btnimg" />收入分析</template
          >
          <!-- 收入分析部分 -->
          <div class="fenxi">
            <div class="shouru">
              <ul class="leftbox">
                <li class="li1">今年</li>
                <li class="li2">￥{{fenxi.year}}</li>
                <li class="li3">
                  <span>同比</span>
                  <span class="zheng">{{fenxi.contrast}}</span>
                </li>
              </ul>
              <ul class="rightbox">
                <li class="li1">总收入</li>
                <li class="li2">￥{{fenxi.total}}</li>
              </ul>
            </div>
            <div class="ding">
              <ul>
                <li class="li5"></li>
                <li class="li4"></li>
              </ul>
            </div>
            <div class="tongji">
              <div class="tonghed">
                <img src="../assets/用户列表切图/收入统计.png" alt="" />
                <span>收入统计</span>
              </div>
              <ul>
                <li v-for="(item,index) in list" :key="index">
                  <span class="span1">{{item.year}}</span
                  ><span class="span2">{{item.income}}</span>
                </li>
                
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab>
          <template #title
            ><van-icon :name="img03" class="btnimg" />旗下企业</template
          >
          <!-- 旗下企业部分 -->
          <div class="qixia">
            <!-- 内容 -->
            <div class="xaing" v-for="(item,index) in qixia" :key="index">
              <dl>
                <dt>
                  <img :src="img06" alt="" />
                </dt>
                <dd>
                  <p>
                    企业名称 : {{item.company}}
                  </p>
                  <p>
                    <span>注册时间:{{item.createTime}}</span>
                  </p>
                  <p>
                    <span>法人:{{item.creator}}</span>
                  </p>
                </dd>
                <dd>
                  <van-icon class="iconright" name="arrow" />
                </dd>
              </dl>
            </div>
          </div>
        </van-tab>
        <van-tab>
          <template #title
            ><van-icon :name="img04" class="btnimg" />合作伙伴</template
          >
          <!-- 合作伙伴部分 -->
          <div class="qixia">
            <!-- 内容 -->
            <div class="xaing" v-for="(item,index) in hezuo" :key="index">
              <dl>
                <dt>
                  <img :src="img06" alt="" />
                </dt>
                <dd class="dd2">
                  <p>
                    {{item.creator}}
                  </p>
                  <p>
                    <span>{{item.company}}</span>
                  </p>
                  <p>
                    <span>成立时间 {{item.createTime}}</span>
                  </p>
                </dd>
                <dd>
                  <van-icon name="arrow" />
                </dd>
              </dl>
            </div>
            
          </div>
        </van-tab>
        <van-tab>
          <template #title
            ><van-icon :name="img05" class="btnimg" />当年收入</template
          >
          <!-- 当年收入部分 -->
          <div class="oldyear">
            <ul>
              <li v-for="(item,index) in dangnian" :key="index">
                <span class="span1">{{item.month}}月</span><span class="span2">{{item.income}}</span>
              </li>
              
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {GetCustMessxiang,GetCustMessParnent} from "@/request/api"
export default {
  props: ["ellipsis"],
  data() {
    return {
      img01: require("../assets/切图/头像男 拷贝 4.png"),
      img02: require("../assets/用户列表切图/收入分析.png"),
      img03: require("../assets/用户列表切图/旗下企业.png"),
      img04: require("../assets/用户列表切图/合作伙伴.png"),
      img05: require("../assets/用户列表切图/当年收入.png"),
      img06: "https://img01.yzcdn.cn/vant/custom-empty-image.png",
      active: 0,
      data : [],
      fenxi : [],
      list : [],
      dangnian : [],
      hezuo : [],
      qixia : [],
      data1 : []
    };
  },
  created(){
    GetCustMessxiang({
      id : this.$route.query.id
    }).then(res=>{
      this.data1 = res.data
    }),
    GetCustMessParnent({
      id : this.$route.query.id
    }).then(res=>{
      this.data = res.data.datas
      this.fenxi = this.data[0].data
      this.list = this.fenxi.list
      this.dangnian = this.data[1].data
      this.hezuo = this.data[2].data
      this.qixia = this.data[3].data
    })
  },
  methods : {
    jump2(){
      let id = this.$route.query.id
      this.$router.push(`/UserMessChild?id=${id}`)
    }
  }
};
</script>
 
<style lang = "less" scoped>

.btnimg {
  display: block;
  font-size: 0.2rem;
  margin-left: 0.2rem;
}
.header {
  position: relative;
  padding-bottom: 0px;
  .u1 {
    font-size: 0.2rem;
    .l1 {
      margin-left: 3.5rem;
    }
  }
  .pian {
    background-color: #f9fcff;
    height: 55%;
    width: 85%;
    position: absolute;
    bottom: 0;
    left: 7.6%;
    padding-top: 0.133333rem;
    border-radius: 0.066667rem 0.066667rem 0 0;
    .xaing {
      margin-left: 0.266667rem;
      color: #000;
      dl {
        display: flex;
        dt {
          width: 20%;
          img {
            width: 100%;
          }
        }
        dd {
          margin: 0.066667rem;
          p {
            margin: 0.036667rem;
            i {
              font-weight: 600;
              margin-left: 0.126667rem;
            }
          }
          .p2 {
            font-weight: 600;
          }
        }
      }
    }
    .xinxi {
      height: 0.17rem;
      width: 0.6rem;
      position: absolute;
      background-color: #ffcc33;
      border-radius: 0.133333rem 0 0 0.133333rem;
      top: 20%;
      right: 0;
      span {
        margin-left: 0.066667rem;
        font-size: 0.08rem;
      }
    }
  }
}
.fenxi {
  background-color: #fff;
  width: 93%;
  height: 4.833333rem;
  margin: 0.1333333rem 0.14333rem 0.2rem;
  box-sizing: border-box;
  padding: 0.2rem 0.233333rem;
  position: relative;
  overflow: hidden;
  .shouru {
    display: flex;
    width: 100%;
    /* height: 1.333333rem; */
    padding: 0 0.133333rem 0.24rem;
    box-sizing: border-box;
    border-bottom: 1px dashed #eee;
    .leftbox {
      margin-right: 0.266667rem;
      .li3 {
        width: 1.005rem;
        height: 0.25rem;
        border-radius: 0.066667rem;
        padding: 0.166667rem 0.16667rem 0;
        background: url("../assets/用户列表切图/底框.png") no-repeat;
        color: rgb(146, 145, 145);
        .zheng {
          color: #003399;
        }
      }
    }
    .rightbox {
      height: 0.466667rem;
      border-left: 1px solid #eee;
      li {
        margin-left: 0.266667rem;
      }
    }
  }
  .ding {
    ul {
      display: flex;
      justify-content: space-between;
      li {
        width: 0.333333rem;
        height: 0.333333rem;
        border-radius: 50%;
        background-color: #eee;
      }
      .li5 {
        position: absolute;
        left: -0.156667rem;
        top: 1.2rem;
      }
      .li4 {
        position: absolute;
        right: -0.156667rem;
        top: 1.2rem;
      }
    }
  }
}
.tongji {
  width: 100%;
  height: 3.133333rem;
  padding-top: 0.24rem;
  box-sizing: border-box;
  .tonghed {
    margin-bottom: 0.24rem;
    display: flex;
    img {
      height: 0.233333rem;
    }
    span {
      margin-left: 0.066667rem;
      color: rgb(133, 131, 131);
    }
  }
  ul {
    width: 100%;
    border-bottom: 2px solid #eee;
    li {
      width: 100%;
      display: flex;
      justify-content: space-between;
      border-top: 1px dashed #eee;
      padding: 0.126667rem 0.133333rem;
      box-sizing: border-box;
      .span1 {
        color: rgb(133, 132, 132);
      }
      .span2 {
        color: #ffcc33;
      }
    }
  }
}
.qixia {
  background-color: #fff;
  margin: 0.133333rem;
  padding: 0 0.133333rem 0;
  box-sizing: border-box;
  .xaing {
    border-bottom: 1px solid #eee;
    dl {
      display: flex;
      dt {
        margin-top: 0.133333rem;
        width: 25%;
        padding: 0 0.066667rem;
        box-sizing: border-box;
        img {
          width: 100%;
        }
      }
      dd {
        margin: 0.066667rem;
        p {
          margin: 0.036667rem;
          color: #000;
        }
        .p2 {
          font-weight: 600;
        }
        span {
          font-size: 0.133333rem;
          color: rgb(124, 122, 122);
        }
        .van-icon {
          margin-top: 0.33rem;
          color: rgb(148, 147, 147) !important;
        }
      }
    }
  }
}
.oldyear {
  width: 100%;
  height: 3.133333rem;
  ul {
    width: 100%;
    border-bottom: 2px solid #eee;
    li {
      width: 94%;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      margin: 0.133333rem 0.133333rem;
      box-sizing: border-box;
      padding: 0.2rem 0.2rem;
      .span1 {
        color: rgb(133, 132, 132);
      }
      .span2 {
        color: #0446ca;
      }
    }
  }
}
dl {
  margin: 0;
  padding: 0.0533333rem 0;
  .dd2 {
    width: 70%;
  }
}
.li1 {
  color: rgb(146, 145, 145);
}
.li2 {
  font-size: 0.213333rem;
  color: #ffcc33;
}
</style>